<template>
  <ul class="list">
    <li v-for="item in list" :key="item.id">
      <a>
        <goods-item
          :id="item.id"
          :cate_id="item.cate_id"
          :image="item.image"
          :price="item.price"
          :sales="item.sales"
          :store_name="item.store_name"
          :vip_price="item.vip_price"
        >
        </goods-item>
      </a>
    </li>
  </ul>
</template>

<script>
import { mapState } from "vuex";
import GoodsItem from "@/components/goods/GoodsItem.vue";
export default {
  data() {
    return {
      list: [],
    };
  },
  watch: {
    searchList: {
      immediate: true,
      deep: true,
      handler() {
        this.list = this.searchList;
      },
    },
  },
  computed: {
    ...mapState("search", ["searchList"]),
  },
  components: {
    GoodsItem,
  },
};
</script>

<style lang="scss" scoped>
.list {
  li {
    padding: 0 0 0 15px;
    margin-top: 23px;
  }
}
</style>

